<template>
	<view>
		<!-- 设置数据时 -->
		<view class="detailsArr" v-for="(item,index) in detailsArr" :key="index">
			<view class="section-head u-m-b-20">
				<!--  <u-image :src="getImg(item.typeIcon)" class="u-m-r-4" border-radius="40" style="width: 50rpx;height: 50rpx;"></u-image> -->
				<span class="u-flex-1 head-title">{{item.productname}}</span>
			</view>
			<view class="list" v-for="(cell,i) in item.list" :key="i">
				<view class="u-flex">
					<view class="u-flex-1"><text class="name">{{cell.name}}</text></view>
					<view @click="addremark(cell)"><text class="link">{{cell.open?'-收起备注':'+备注'}}</text></view>
				</view>
				<u-form :model="cell" ref="uForm" label-width="240" :label-style="{'color':'#909399'}">
					<u-form-item :label="`单价(元/${cell.isweighing?'KG':'件'})`" v-if="!noPrice">
						<input class="input-text u-m-0" v-model="cell.price" type="digit" :class="cell.err?'err':''" :min="cell.minprice" :max="cell.highprice" input-align="center" placeholder="请输入单价" :disabled="!cell.allowedit" border @input="upDate(cell,index,i,'price')"/>
					</u-form-item>
					<u-form-item :label="`${cell.isweighing?'重量':'数量'}(${cell.isweighing?'KG':'件'})`">
						<view class="u-flex">
							<view class="gl-btn" @click="getCount(cell,index,i)"><u-icon name="plus" color="#c3c6ca"></u-icon></view>
							<input class="input-text u-flex-1 u-m-0" v-model="cell.weight" type="digit" :class="cell.weightErr?'err':''" input-align="center" placeholder="请输入数量" border @input="upDate(cell,index,i,'weight')" />
						</view>
					</u-form-item>
					<u-form-item label="备注" label-position="top" v-if="cell.open">
						<u-input v-model="cell.typeremarks" type="textarea" border input-align="left" placeholder="请输入备注"/>
					</u-form-item>
				</u-form>
				<view v-if="cell.allowedit">
					<u-alert-tips 
						v-if="!noPrice"
						class="u-m-t-30"
						type="warning" 
						:description="`价格范围仅能设置在${cell.minprice}-${cell.highprice}元内`"
						:show-icon="true">
					</u-alert-tips>
				</view>
				
				<view class="total">
					<view class="u-flex">
						<view>
							<u-button type="error" size="mini" plain @click="delGoods(index,i)">删除</u-button>
						</view>
						<view class="u-flex-1" v-if="cell.price && !noPrice">
							<text>小计:</text>
							<text class="total-price">
								<text v-if="!cell.price || !cell.weight">--</text>
								<text v-else>{{(cell.price*cell.weight).toFixed(2)}}</text>
							</text>
						</view>
						<view v-if="cell.stock" class="u-text-right u-flex-1">
							<text class="u-tips-color u-font-24">注：{{cell.name}}库存数量为{{cell.stock}}{{cell.isweighing?'KG':'件'}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 展示数据时 -->
		<view class="detailsArr" v-for="(item,index) in details" :key="index">
			<view class="section-head u-m-b-20">
				<!-- <u-image :src="getImg(item.icon)" class="u-m-r-4" border-radius="40" style="width: 50rpx;height: 50rpx;"></u-image> -->
				<span class="u-flex-1 head-title">{{item.names}}</span>
			</view>
			<view class="list" v-for="(cell,i) in item.details" :key="i">
				<view class="u-flex">
					<view class="u-flex-1"><text class="name">{{cell.productname}}：</text></view>
				</view>
				<!-- <u-form :model="cell" ref="uForm" label-width="350" :label-style="{'color':'#909399'}">
					<u-form-item :label="`单价(元/${cell.isweighing?'KG':'件'})`">
						<u-input class="u-m-0" v-model="cell.price" type="digit" input-align="right" placeholder="请输入单价" disabled/>
					</u-form-item> 
					<u-form-item :label="`客户组(${cell.isweighing?'KG':'件'})`">
						<u-input class="u-m-0" v-model="cell.weight" type="digit" input-align="right" placeholder="请输入数量" disabled/>
					</u-form-item>
				</u-form> -->
				<view class="middle u-flex">
					<view class="item">
						<text class="label u-tips-color">单价</text>
						<view class="data-item">
							<text class="u-flex-1 u-text-right num">{{cell.price}}</text>
							<text class="unit">{{cell.isweighing?'元/KG':'元/件'}}</text>
						</view>
					</view>
					<view class="item">
						<text class="label u-tips-color">总量</text>
						<view class="data-item">
							<text class="u-flex-1 u-text-right num">{{cell.weight}}</text>
							<text class="unit">{{cell.isweighing?'KG':'件'}}</text>
						</view>
					</view>
				</view>
				<u-alert-tips v-if="cell.typeremarks" class="u-m-t-10" type="info" :description="'备注：'+cell.typeremarks"></u-alert-tips>

				<view class="total">
					<!-- <text>共{{item.list.length}}种回收品 小计:</text> -->
					<view class="u-flex">
						<view class="u-flex-1">
							<text>小计:</text>
							<text class="total-price">
								{{cell.amount.toFixed(2)}}
							</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 入库单详情展示回收品类 -->
		<view class="detailsArr" v-for="(item,index) in make" :key="index">
			<view class="section-head u-m-b-20">
				<!-- <u-image :src="getImg(item.icon)" class="u-m-r-4" border-radius="40" style="width: 50rpx;height: 50rpx;"></u-image> -->
				<span class="u-flex-1 head-title">{{item.names}}</span>
			</view>
			<view class="list" v-for="(cell,i) in item.details" :key="i">
				<view class="u-flex">
					<view class="u-flex-1"><text class="name">{{cell.productname}}：</text></view>
				</view>
				<!-- <u-form :model="cell" ref="uForm" label-width="350" :label-style="{'color':'#909399'}">
					<u-form-item :label="`${cell.isweighing?'单价（元/KG）':'单价（元/件）'}`">
						<u-input class="u-m-0" v-model="cell.price" type="digit" input-align="right" placeholder="请输入" disabled/>
					</u-form-item>
					<u-form-item :label="`${cell.isweighing?'重量（KG）':'数量（件）'}`" v-if="cell.originalweight">
						<u-input class="u-m-0" v-model="cell.originalweight" type="digit" input-align="right" placeholder="请输入" disabled/>
					</u-form-item>
					<u-form-item v-if="cell.approvedweight > 0" :label="`${cell.isweighing?'实际入库重量（KG）':'实际入库数量（件）'}`">
						<u-input class="u-m-0" v-model="cell.approvedweight" type="digit" input-align="right" placeholder="请输入" disabled/>
					</u-form-item>
					<u-form-item v-if="cell.approvedweight > 0" :label="`${cell.isweighing?'差额（KG）':'差额（件）'}`">
						<u-input class="u-m-0" v-model="cell.diff" type="digit" input-align="right" placeholder="请输入" disabled/>
					</u-form-item>
					<u-form-item :label="`入库金额(元)`">
						<u-input class="u-m-0" v-model="cell.amount" type="digit" input-align="right" placeholder="请输入" disabled/>
					</u-form-item>
				</u-form> -->
				<view class="middle u-flex">
					<view class="item" v-if="cell.originalweight">
						<text class="label u-tips-color">总量</text>
						<view class="data-item">
							<text class="u-flex-1 u-text-right num">{{cell.originalweight}}</text>
							<text class="unit">{{cell.isweighing?'KG':'件'}}</text>
						</view>
					</view>
					<view class="item">
						<text class="label u-tips-color">实际入库</text>
						<view class="data-item">
							<text class="u-flex-1 u-text-right num">{{cell.approvedweight == 0? '待定':cell.approvedweight}}</text>
							<text class="unit" v-if="cell.approvedweight > 0">{{cell.isweighing?'KG':'件'}}</text>
						</view>
					</view>
					<view class="item">
						<text class="label u-tips-color">单价</text>
						<view class="data-item">
							<text class="u-flex-1 u-text-right num">{{cell.price}}</text>
							<text class="unit">{{cell.isweighing?'元/KG':'元/件'}}</text>
						</view>
					</view>
					<view class="item">
						<text class="label u-tips-color">入库金额</text>
						<view class="data-item">
							<text class="u-flex-1 u-text-right num">{{cell.amount}}</text>
							<text class="unit">元</text>
						</view>
					</view>
				</view>
				<u-alert-tips
					v-if="cell.approvedweight > 0 && cell.diff != 0"
					class="u-m-t-30"
					type="warning" 
					:description="`${cell.productname}实际入库差额${cell.diff}${cell.isweighing?'KG':'件'}`"
					:show-icon="true">
				</u-alert-tips>
				<u-alert-tips v-if="cell.typeremarks" class="u-m-t-10" type="info" :description="'备注：'+cell.typeremarks"></u-alert-tips>
			</view>
		</view>
		
		<!-- 出库单详情展示回收品类 -->
		<view class="detailsArr" v-for="(item,index) in deliverdetails" :key="index">
			<view class="section-head u-m-b-20">
				<!-- <u-image :src="getImg(item.icon)" class="u-m-r-4" border-radius="40" style="width: 50rpx;height: 50rpx;"></u-image> -->
				<span class="u-flex-1 head-title">{{item.names}}</span>
			</view>
			<view class="list" v-for="(cell,i) in item.details" :key="i">
				<view class="u-flex">
					<view class="u-flex-1"><text class="name">{{cell.productname}}：</text></view>
				</view>
				<view class="middle u-flex">
					<view class="item" style="flex: 0 0 calc(33.333%);">
						<text class="label u-tips-color">单价</text>
						<view class="data-item">
							<text class="u-flex-1 u-text-right num">{{cell.costprice}}</text>
							<text class="unit">{{cell.isweighing==false?'元/件':'元/KG'}}</text>
						</view>
					</view>
					<view class="item" style="flex: 0 0 calc(33.333%);">
						<text class="label u-tips-color">总量</text>
						<view class="data-item">
							<text class="u-flex-1 u-text-right num">{{cell.weight}}</text>
							<text class="unit">{{cell.isweighing==false?'元/件':'元/KG'}}</text>
						</view>
					</view>
					<view class="item" style="flex: 0 0 calc(33.333%);">
						<text class="label u-tips-color">总价值</text>
						<view class="data-item">
							<text class="u-flex-1 u-text-right num">{{cell.costamount}}</text>
							<text class="unit">元</text>
						</view>
					</view>
				</view>
				<u-alert-tips v-if="cell.typeremarks" class="u-m-t-10" type="info" :description="'备注：'+cell.typeremarks"></u-alert-tips>
			</view>
			<!-- <view class="total">
				<view class="u-flex">
					<view class="u-flex-1">
						<text>共{{item.details.length}}种回收品 小计：</text>
						<text class="total-price" v-if="item.weight">{{(item.weight).toFixed(2)}}<text class="u-font-24">KG</text></text>
						<text class="total-price" v-if="item.quantity > 0"> {{item.quantity}}<text class="u-font-24">件</text></text>
					</view>
				</view>
			</view> -->
		</view>
		
		<!-- 计算重量操作 -->
		<u-popup 
			v-model="count.show" 
			mode="center" 
			border-radius="14" 
			:closeable="true"
			:mask-close-able="false"
			width="600rpx">
			<view class="u-p-60">
				<view class="u-p-t-30 u-p-r-60 u-p-l-60">
					<view><text class="u-font-28 u-tips-color">当前重量为：</text></view>
					<view class="u-p-t-10" style="word-break: break-all;">
						<text v-for="(item,index) in count.formula" :key="index" class="u-font-36">{{item}}</text>
						<text v-if="count.formula.length > 0">=</text>
					</view>
					<view class="u-p-t-16 u-p-b-16 u-text-center"><text class="u-font-100">{{count.getWeight}}</text><text>KG</text></view>
					<input 
						class="input-text u-flex-1" 
						style="text-align:center;height: 60px;"
						v-model="count.weight" 
						type="digit" 
						input-align="center" 
						placeholder="请输入数量" 
						border 
					/>
				</view>
		
				<view class="u-p-r-60 u-p-l-60">
					<view class="u-flex">
						<u-button class="u-flex-1 u-m-r-15" @click="operate('minus')"><u-icon name="minus"></u-icon></u-button>
						<u-button class="u-flex-1" @click="operate('plus')"><u-icon name="plus"></u-icon></u-button>
					</view>
				</view>
				
				<view class="u-p-t-30 u-p-r-60 u-p-l-60">
					<u-button type="primary" @click="confirmWeigh">确定</u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		props: ["listData","orderId","details","make","deliverdetails","state","isStock","stockList","noPrice"],
		watch: {
			// 设置时用参数
			listData(val){
				console.log('监听listData数据:',val)
				this.handleListData(val)
			}
		},
		data() {
			return {
				detailsArr: [],
				stockdata: [],
				count:{
					show: false,
					getWeight: 0,
					weight: null,
					formula: [],
					cell: {},
					index: 0,
					i:0
				}
			}
		},
		created() {
			console.log('监听listData数据:',this.listData)
			this.handleListData(this.listData)
		},
		methods: {
			// 确定重量赋值
			confirmWeigh(){
				if(this.count.weight != null){
					uni.showToast({
						title: '请点击增加或减少',
						icon: 'none'
					})
					return
				}
				this.count.cell.weight = this.count.getWeight
				this.upDate(this.count.cell,this.count.index,this.count.i,'weight')
				this.count.show = false
			},
			// 运算方法
			operate(type){
				//JavaScript中的数字运算遵循IEEE 754标准的浮点数算法，这种算法使用二进制来表示实数，以及对实数进行加、减、乘、除等运算。然而，由于二进制不能准确地表示所有的十进制小数，因此，进行数字运算时可能会出现无限小数。
				//例如，0.1在二进制中是一个无限循环的小数，用64位浮点数表示时就会出现精度误差。如果对0.1和0.2进行加法运算，期望结果是0.3，但是实际结果可能是0.30000000000000004，这是由于二进制表示的精度问题造成的。
				if(!this.count.weight){
					uni.showToast({
						title: '请输入数量',
						icon: 'none'
					})
					return
				}
				if(this.count.formula.length == 0){
					this.count.formula.push(this.count.getWeight)
				}
				if(type == 'minus'){
					this.count.formula.push("-")
					this.count.formula.push(this.count.weight)
					this.count.getWeight = Math.round(parseFloat(this.count.getWeight) * 10000000 - parseFloat(this.count.weight)* 10000000)/10000000
					this.count.weight = null
				}else if(type == 'plus'){
					this.count.formula.push("+")
					this.count.formula.push(this.count.weight)
					this.count.getWeight = Math.round(parseFloat(this.count.getWeight) * 10000000 + parseFloat(this.count.weight)* 10000000)/10000000
					this.count.weight = null
				}
			},
			// 计算重量方法
			getCount(cell,index,i){
				this.count.show = true
				this.count.formula = []
				if(parseFloat(cell.weight) > 0){
					this.count.getWeight = cell.weight
				}else{
					this.count.getWeight = 0
				}
				this.count.cell = cell
				this.count.index = index
				this.count.i = i
			},
			// 更新数据到父组件
			upDate(e,index,i,type){
				let confirmForm = {
					details:[]
				}
				this.detailsArr.forEach((item)=>{
					item.list.forEach((cell)=>{
						let obj = Object.assign(cell)
						confirmForm.details.push(obj)
					})
				})
				if(type == 'price'){
					this.checkPrice(e,index,i)
				}
				if(type == 'weight'){
					this.checkWeight(e,index,i)
				}
				this.$emit('upDate', confirmForm)
			},
			// 处理listData数据
			handleListData(val){
				if(!val){
					this.detailsArr = []
					return
				}
				// 重构数组
				let arr = val.map((item)=>{
					return {
						typeId: item.typeid,
						productname: item.typenames,
						typeIcon: item.pic,
						list: []
					}
				})
				
				var newArr = [];
				for (var i = 0; i < arr.length; i++) {
					var repArr = [];//接收重复数据后面的下标
					//内层循环找出有重复数据的下标
					for (var j = i + 1; j < arr.length; j++) {
						if (arr[i].typeId == arr[j].typeId) {
							repArr.push(j);//找出后面重复数据的下标
						}
					}
					if (repArr.length == 0) {//若重复数组没有值说明其不是重复数据
						newArr.push(arr[i]);
					}
				}
				
				newArr.forEach((item,index)=>{
					// 判断是否需要查询库存，若是则加上库存上限参数
					if(this.isStock == true){
						this.getStock().then((stockdata)=>{
							val.map((item)=>{
								stockdata.map((cell)=>{
									cell.details.map((span)=>{
										if(item.id == parseInt(span.typepath)){
											item.stock = span.weight
										}
									})
								})
							})
							item.list = val.filter(cell=>cell.typeId == item.typeId)
							item.list.forEach((cell,i)=>{ //判断是否有备注，有则显示
								if(cell.typeremarks){
									cell.open = true
								}
							})
							this.detailsArr = newArr
						})
					}else{
						item.list = val.filter(cell=>cell.typeid == item.typeId)
						item.list.forEach((cell,i)=>{ //判断是否有备注，有则显示
							if(cell.typeremarks){
								cell.open = true
							}
						})
						this.detailsArr = newArr
					}
					// item.list = val.filter(cell=>cell.typeId == item.typeId)
				})
				
				this.$forceUpdate()
			},
			// 检查库存数量
			checkWeight(e, index, i){
				if(this.isStock == true){
					if(parseInt(e.weight) > e.stock){
						this.detailsArr[index].list[i].weightErr = true
					}else{
						this.detailsArr[index].list[i].weightErr = false
					}
				}
			},
			//检查设置价格
			checkPrice(e, index, i) {
				console.log(e)
				if (e.price > e.highprice || e.price < e.minprice) {
					this.detailsArr[index].list[i].err = true
				} else {
					this.detailsArr[index].list[i].err = false
				}
			},
			// 删除小类
			delGoods(index,i){
				this.detailsArr[index].list.splice(i,1)
				this.upDate()
			},
			// 打开/收起备注
			addremark(item){
				item.open = !item.open
				this.$forceUpdate()
			},
			// 获取库存
			getStock(){
				if(this.stockdata.length > 0){
					return Promise.resolve(this.stockdata)
				}
				return this.$u.get('/Store/Stock/Get').then((data)=>{
					this.stockdata = data
					return data
				})
			},
			getImg(url){
				return this.fileURL + url
			}
		}
	}
</script>

<style lang="scss" scoped>
	.head-title{
		font-size: 36rpx;
	}
	.middle {
		font-size: 24rpx;
		margin: 20rpx 0;
		line-height: 40rpx;
		border: 1px solid $u-border-color;
		border-width: 1px 0 0 1px;
		flex-wrap: wrap;
		.item{
			border: 1px solid $u-border-color;
			border-width: 0 1px 1px 0;
			flex: 0 0 calc(50%);
			padding: 10rpx 20rpx;
			.data-item{
				// border-top: 1px solid $u-border-color;
				margin-top: 6rpx;
				.num{
					font-size: 32rpx;
				}
				.unit{
					font-size: 24rpx;
					// color: $u-tips-color;
				}
			}
		}
		.label{
			
		}
	}
	// 分拣清算
	.detailsArr{
		margin: 20rpx 0;
		padding: 30rpx;
		border: 1px solid $u-border-color;
		border-radius: 12rpx;
		margin-top: 30rpx;
		box-shadow: $u-color-border-shadow;
		.link{
			color: $u-color-blue;
		}
		.list{
			// border: 1px solid $u-border-color;
			&+.list{
				margin-top: 40rpx;
			}
			.u-form-item{
				padding: 0;
			}
			.name{
				font-weight: bold;
			}
		}
	}
	
	.total {
		margin-top: 20rpx;
		text-align: right;
		font-size: 24rpx;
		.total-price {
			font-size: 32rpx;
			color: $u-color-orange;
		}
	}
	
	.input-text{
		border: 1px solid $u-border-color;
		border-radius: 5px;
		height: 30px;
		text-align: center;
		margin: 20rpx 0;
		padding-right: 20rpx;
		padding-left: 20rpx;
	}
	
	.err {
		color: $u-type-error;
		border-color: $u-type-error !important;
	}
	
	.gl-btn{
		width: 60rpx;
		height: 60rpx;
		font-size: 24rpx;
		text-align: center;
		border: 1px solid #e4e7ed;
		border-radius: 4px;
		display: flex;
		align-content: space-around;
		align-items: center;
		justify-content: space-around;
		// height: 60rpx;
		// line-height: 60rpx;
		margin-right: 2px;
	}
</style>
